/* 
第十章：DOM进界
*/

window.onload = function () {
   //获取静态HTML属性
   getStaticAtrribute1();
   //动态创建DOM元素,并获DOM元素的属性
   getDynamicAtrribute1()
   //获取单行文本框的值
   getInputText();
   //获取标签元素节点的内容
   getDivH3Text();
   //获取单选框的值
   aiHaoRadio();
   //获取复选框checkBox选项
   yuDongCheckbox();
   //下拉菜单操作
   selectOperation();
   //改变的按钮名
   changeButtonText();
   //电灯的开与关
   openCloseLight();
   ////元素属性操作:获取，添加，删除，判断是否存在属性四个操作。
   divAttriOperate();
   //元素属性值的操作:获取或设置CSS属性的值
   divAttriValueOperate();
}

//获取静态HTML属性
function getStaticAtrribute1() {
   var oDiv1 = document.getElementById("div1");
   oDiv1.onclick = function () {
      var odivShow = document.querySelector("#div1>.divShow");
      var innerHTMLTemp = "ID名:" + oDiv1.id;
      innerHTMLTemp += "<br/>类名:" + oDiv1.className;
      innerHTMLTemp += "<br/>此色块宽和高:" + oDiv1.style.width;
      odivShow.innerHTML = innerHTMLTemp;

   }

}
//动态创建DOM元素,并获DOM元素的属性
function getDynamicAtrribute1() {
   var oDiv2 = document.querySelector("#div2");
   oDiv2.onclick = function () {
      //获取#inputPosition
      var oinputPosition = document.querySelector("#div2 #inputPosition");;
      oinputPosition.innerHTML = "";
      var oinput = document.createElement("input");
      oinput.type = "text";
      oinput.id = "input001";
      oinput.style.backgroundColor = "yellow";
      oinputPosition.appendChild(oinput);
      //
      var oinputAtrr = document.getElementById("inputAtrr");
      var oinputAtrrHtml = "文本框的ID:" + oinput.id;
      oinputAtrrHtml = oinputAtrrHtml + "<br/>文本框的type值:" + oinput.type;
      oinputAtrrHtml = oinputAtrrHtml + "<br/>文本框的background值:" + oinput.style.backgroundColor;
      console.log("背景色:" + oinput.style.backgroundColor);
      oinputAtrr.innerHTML = oinputAtrrHtml;

   }
}

//获取单行文本框的值
function getInputText() {
   var oButtonGetValue = document.getElementById("buttonGetValue");

   oButtonGetValue.onclick = function () {
      var oInputvalue = document.getElementById("inputValue");
      //var oUserName=document.getElementsByName("userName");
      var oUserName = document.getElementById("userName");
      if (oUserName.value == "" || oUserName.value == " ") {
         alert("请输入文本框内容");
         oUserName.focus();
      }
      oInputvalue.innerHTML = "输入的值为:" + oUserName.value;
   }
}


//获取标签元素节点的内容
function getDivH3Text() {
   var oh3Text = document.getElementById("h3Text");
   oh3Text.onclick = function () {
      var oTxt001 = document.getElementById("txt001");
      alert("本色块加精字体值为:" + oTxt001.innerText);
   }
}

//获取单选框的值
function aiHaoRadio() {
   var oAiHaoBtn = document.getElementById("aiHaoBtn");
   var oFruit = document.getElementsByName("fruit");
   var oAiHaoList = document.getElementById("aiHaoList");

   oAiHaoBtn.onclick = function () {
      //判断有没有选择
      var num001 = 0;
      for (var i = 0; i < oFruit.length; i++) {
         if (oFruit[i].checked) {
            num001 += 1;
         }
      }
      if (num001 < 1) {
         alert("请先选择");

      }

      //返回的是数组(多项选择的内容）
      for (var i = 0; i < oFruit.length; i++) {
         if (oFruit[i].checked) {
            alert("爱好" + oFruit[i].value);
            oAiHaoList.innerHTML = "你的最爱:<font color=red>" + oFruit[i].value + "</font>";
            console.log(oAiHaoList.innerHTML);
         }
      }

   }

}
//复选框取值
function yuDongCheckbox() {
   //获取按钮ID
   var oCheckboxBtn = document.getElementById("checkboxBtn");
   var oCheckboxSelectAll = document.getElementById("checkboxSelectAll");
   var oCheckboxSelectNot = document.getElementById("checkboxSelectNot");
   var oCheckboxInvertSelect = document.getElementById("checkboxInvertSelect");
   var oSportList = document.getElementById("sportList");
   var oSports = document.getElementsByName("sports");
   //获取被选择项的数据
   oCheckboxBtn.onclick = function () {
      var sportList = "";
      for (var i = 0; i < oSports.length; i++) {
         if (oSports[i].checked) {
            sportList = sportList + "<font color=red>" + oSports[i].value + "</font> ";
         }
      }

      oSportList.innerHTML = sportList;
   }
   //全部选择数据
   oCheckboxSelectAll.onclick = function quanXuan() {
      for (var i = 0; i < oSports.length; i++) {
         oSports[i].checked = "true";
      }
   }
   //清空数据
   oCheckboxSelectNot.onclick = function () {
      alert("清空选择功能");
      for (var i = 0; i < oSports.length; i++) {
         oSports[i].checked = 0;
      }
   }
   //反向选择
   oCheckboxInvertSelect.onclick = function () {
      for (var i = 0; i < oSports.length; i++) {

         if (oSports[i].checked)
            //不可以用oSports[i].checked=0
            oSports[i].checked = false;
         else
            oSports[i].checked = true;

      }
   }

}

//下拉菜单操作
function selectOperation() {
   //sportsID是<select id="sportsID"
   var oSportsID=document.getElementById("sportsID");
   var oSelectBtn=document.getElementById("selectBtn");
   oSelectBtn.onclick=function(){
      if(oSportsID.value==""){
         alert("没有选择，请选择");
         oSportsID.focus;
      }else{
         alert(oSportsID.value);
      }

    
   }
}

//改变HTML属性：按钮的值
function changeButtonText(){
   var oChangeButton=document.getElementById("changeButton");
   oChangeButton.onclick=function(){
      alert("change Text");
      oChangeButton.value="button";
   }
}

//改变HTML属性：电灯的开与关
function openCloseLight(){
   var oLight=document.getElementById("light");
   var flag=true;
   oLight.onclick=function(){
      if(flag==false){
         flag=true;
         oLight.src="images/lightClose.png";
      }
      else{
         flag=false;
         oLight.src="images/lightOpen.png";

      }
      
   }
}

//元素属性操作:获取，添加，删除，判断是否存在属性。
function divAttriOperate() {
   var oDivShow=document.getElementById("divShow001");
   var oDivGetAtrri=document.getElementById("divGetAtrri");
   var oDivAddAtrri=document.getElementById("divAddAtrri");
   var oDivRemoveAtrri=document.getElementById("divRemoveAtrri");
   var oDivHasAtrri=document.getElementById("divHasAtrri");
   var oReturnList=document.getElementById("returnList");
   var returnList="";
   //获取元素属性
   oDivGetAtrri.onclick=function(){      
      returnList+="获取属性值的的结果:<br/>属性获取ID名:<font color='red'>"+oDivShow.id+"</font>";
      returnList+="<br/>方法获取ID名:<font color='red'>"+oDivShow.getAttribute("id")+"</font>";     
      returnList+="<br/>方法获取类的名:<font color='red'>"+oDivShow.getAttribute("class")+"</font>";     
      returnList+="<br/>属性获取类的名:<font color='red'>"+oDivShow.className+"</font>";
      oReturnList.innerHTML=returnList;
      returnList="";
   }
   //添加元素属性
   oDivAddAtrri.onclick=function(){

      oDivShow.setAttribute("Id","newId");
   
   }
   //删除元素属性
   oDivRemoveAtrri.onclick=function(){
      alert("删除元素属性");
      //删除提定ID
      oDivShow.removeAttribute("Id","newId");
      //删除所有class
      oDivShow.removeAttribute("class");
   }
   //判断某个属性是否存在
   oDivHasAtrri.onclick=function(){
      alert("点击添加属性和删除属性，判断是否删除类属性class:"+oDivShow.hasAttribute("class"));
   }
}

//元素属性值的操作:获取或设置CSS属性的值
function divAttriValueOperate(){
   var oDiv2GetAtrri=document.getElementById("div2GetAtrri");
   var oDiv2AddAtrri22=document.getElementById("div2AddAtrri22");
   var oDiv2AddAtrri33=document.getElementById("div2AddAtrri33");
   var oBoxAttr2=document.getElementById("boxAttr2");
   //获取背景属性值
   oDiv2GetAtrri.onclick=function(){
     var oBoxAttr2Value="";
     //获取背景属性值
     oBoxAttr2Value=getComputedStyle(oBoxAttr2).backgroundColor;
     alert("获取背景的值:"+oBoxAttr2Value);
   }
   //添加背景属性值方法一
   oDiv2AddAtrri22.onclick=function(){
     var colorValue="red";
     var width="450px";
     //添加属性的值
      oBoxAttr2.style.backgroundColor=colorValue;
      oBoxAttr2.style.width=width;

     alert("设置背景的值:"+colorValue+"宽度为:"+width);
   }
   //添加背景属性值方法二
   oDiv2AddAtrri33.onclick=function(){
     var oBoxAttr2Value="red";
     //添加属性的值
    oBoxAttr2.style.cssText="background:green;width:200px;height:50px;";
     alert("设置背景的值:"+oBoxAttr2Value);
   }
}